<template>
	<view class="container">
		<view class="box-1">
			<view class="my">
				<view class="left">
					<view class="num"> <text>￥</text>{{userinfo.money}} </view>
					<view class="text"> 我的余额 </view>
				</view>
				<button @click="toCashOut">提现</button>
			</view>
			<view class="ing M-style">
				<view class="i M-style-item" :class="{ 'select-M-style-item': type == 1 }" @click="selectType(1)">
					<text>待结算</text>
					<view class="num">
						<text>￥</text>{{ info.wjs_money || 0 }}
					</view>
				</view>
				<view class="i M-style-item" :class="{ 'select-M-style-item': type == 2 }" @click="selectType(2)">
					<text>已结算</text>
					<view class="num">
						<text>￥</text>{{ info.yjs_money || 0 }}
					</view>
				</view>
				<!-- <view class="i M-style-item" :class="{ 'select-M-style-item': type == 3 }" @click="selectType(3)">
					<text style="font-size: 36rpx">提现记录</text>
				</view> -->
			</view>
		</view>

		<view class="box-2">
			<view class="top-date">
				<!-- <text> {{ year }}年</text>
        <text> {{ month }}月</text> -->
				<view class="example-body">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="change" />
					<view class="icon-box">
						<uni-icons class="icon" type="down" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<!-- <view class="order-tab">
        <view
          class="tab-item"
          :class="tab_index == 1 ? 'select' : ''"
          @click="tab_index = 1"
        >
          <text>结算明细</text>
        </view>
        <view
          class="tab-item"
          :class="tab_index == 2 ? 'select' : ''"
          @click="tab_index = 2"
        >
          <text>提现记录</text>
        </view>
      </view> -->
			<view class="M-card">
				<view class="M-card-item">
					<text>{{ info.service_money || 0 }}</text>
					<text>服务收益</text>
				</view>
				<view class="M-card-item">
					<text>{{info.shop_money || 0}}</text>
					<text>商品收益</text>
				</view>
			</view>
			<view class="box-2">
				<view class="list-box">
					<view class="item" v-for="i in list" :key="i">
						<view class="item-left">
							<text>{{i.name}}</text>
							<text class="time">{{i.createtime}}</text>
						</view>
						<view class="price-text"> ￥{{i.money}} </view>
					</view>
				</view>
			</view>
			<!-- <view class="tab-1" v-if="tab_index == 1">
        <view class="item" @click="toDetailed(1)">
          <view class="time"> 2024-05 </view>
          <view class="info">
            <view class="left">
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>服务收益</text>
              </view>
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>商品收益</text>
              </view>
            </view>
            <view class="right">
              <text class="no">未结算</text>
              <image
                :src="$img_path('/mine/r_img.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="item" @click="toDetailed(2)">
          <view class="time"> 2024-05 </view>
          <view class="info">
            <view class="left">
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>服务收益</text>
              </view>
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>商品收益</text>
              </view>
            </view>
            <view class="right">
              <text class="ing">待结算</text>
              <image
                :src="$img_path('/mine/r_img.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="item" @click="toDetailed(3)">
          <view class="time"> 2024-05 </view>
          <view class="info">
            <view class="left">
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>服务收益</text>
              </view>
              <view class="sy">
                <view class="num"> <text>￥</text>500.00 </view>
                <text>商品收益</text>
              </view>
            </view>
            <view class="right">
              <text class="end">已结算</text>
              <image
                :src="$img_path('/mine/r_img.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
      </view> -->

			<view class="tab-2" v-if="tab_index == 2">
				<view class="t-item">
					<view class="t-1">
						<text>提现至银行卡（1234）</text>
						<text :style="{ color: true ? '#333333' : '#FFCC26' }">{{
              true ? "已到账" : "审核中"
            }}</text>
					</view>
					<view class="t-2"> -￥100.00 </view>
					<view class="t-3">
						<text>实际到账：￥99.00</text>
						<text>2024-05-23 14:00:00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uv-datetime-picker
      ref="datetimePicker"
      v-model="value"
      mode="year-month"
      @confirm="confirm"
      :maxDate="maxDate"
      :minDate="minDate"
    >
    </uv-datetime-picker> -->
	</view>
</template>

<script>
	import * as api from "@/utils/api/index.js";
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				tab_index: 1,
				year: "",
				month: 1,
				value: Number(new Date()),
				minDate: "",
				maxDate: "",
				// 收益信息
				incomeInfo: {
					list: [],
				},
				// 结算类型
				type: 1, //1待结算 2已结算
				single: dayjs().format("YYYY-MM"),
				list: [],
				userinfo: {},
				info: {}
			};
		},
		onLoad() {
			this.getSqJiesuan()
			this.userinfo = JSON.parse(uni.getStorageSync("userInfo"));
		},
		methods: {
			async getSqJiesuan() {
				let obj = {
					type: this.type,
					type: this.single
				}
				const {
					code,
					data
				} = await api.getSqJiesuan(obj)
				if (code == 1) {
					if (code == 1) {
						this.list = data.list
						this.info = data
					}
				}
			},
			// 选择结算类型
			selectType(type) {
				this.type = type;

			},
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				this.month = this.$dayjs(e.value).format("MM");

			},
			toDetailed(type) {
				uni.navigateTo({
					url: `/pagesMine/myIncome/detailed?type=${type}`,
				});
			},
			toCashOut() {
				// uni.navigateTo({
				// 	url: `/pagesMine/myIncome/cashOut`,
				// });
			},
			change(e) {
				this.single = e;
				console.log("change事件:", (this.single = e));
			},
		},
	};
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.container {
		.box-1 {
			padding: 0 22rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			.my {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0 34rpx;
				box-sizing: border-box;

				.left {
					.num {
						font-weight: bold;
						font-size: 62rpx;
						color: #000000;
						line-height: 74rpx;

						text {
							font-size: 36rpx;
						}
					}

					.text {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 40rpx;
						margin-top: 4rpx;
					}
				}

				button {
					width: 124rpx;
					height: 64rpx;
					background: #e72a2a;
					border-radius: 12rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #ffffff;
					line-height: 64rpx;
				}
			}

			.ing {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40rpx 0;
				border-top: 2rpx solid #eeeeee;

				.i {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					&:nth-child(2) {
						margin-left: 120rpx;
					}

					&>text {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 40rpx;
					}

					.num {
						font-weight: bold;
						font-size: 52rpx;
						color: #000000;
						line-height: 74rpx;
						margin-top: 4rpx;

						text {
							font-size: 36rpx;
						}
					}
				}
			}
		}

		.box-2 {
			background-color: #ffffff;
			border-top: 20rpx solid #eeeeee;

			.order-tab {
				padding: 32rpx 22rpx 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background-color: #ffffff;
				z-index: 3;

				.tab-item {
					text {
						font-weight: 400;
						font-size: 36rpx;
						color: #333333;
						line-height: 44rpx;
						position: relative;
					}

					&.select {
						text {
							font-weight: bold;
							font-size: 36rpx;
							color: #e72a2a;
							line-height: 44rpx;

							&::after {
								content: "";
								width: 52rpx;
								height: 8rpx;
								background: #e72a2a;
								border-radius: 4rpx;
								position: absolute;
								top: calc(100% + 4rpx);
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}
			}

			.tab-1 {
				.item {
					padding: 40rpx 22rpx 38rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eeeeee;

					.time {
						font-weight: 400;
						font-size: 36rpx;
						color: #333333;
						line-height: 44rpx;
					}

					.info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							.sy {
								display: flex;
								flex-direction: column;
								align-items: center;

								&:last-child {
									margin-left: 80rpx;
								}

								.num {
									font-weight: bold;
									font-size: 52rpx;
									color: #000000;
									line-height: 74rpx;
									margin-top: 4rpx;

									text {
										font-size: 36rpx;
									}
								}

								text {
									font-weight: bold;
									font-size: 36rpx;
									color: #333333;
									line-height: 40rpx;
									margin-top: 4rpx;
								}
							}
						}

						.right {
							display: flex;
							justify-content: flex-end;
							align-items: center;

							text {
								font-weight: 400;
								font-size: 36rpx;
								line-height: 44rpx;

								&.no {
									color: #e72a2a;
								}

								&.ing {
									color: #ffcc26;
								}

								&.end {
									color: #000000;
								}
							}

							image {
								width: 12rpx;
								height: 21rpx;
								margin-left: 48rpx;
							}
						}
					}
				}
			}

			.tab-2 {
				.t-item {
					padding: 32rpx 20rpx 34rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eeeeee;

					&>view {
						display: flex;
						align-items: center;
						justify-content: space-between;

						&.t-1 {
							text:nth-child(1) {
								font-weight: bold;
								font-size: 36rpx;
								color: #333333;
								line-height: 40rpx;
							}

							text:nth-child(2) {
								font-weight: bold;
								font-size: 36rpx;
								line-height: 40rpx;
							}
						}

						&.t-2 {
							font-weight: bold;
							font-size: 36rpx;
							color: #0291ff;
							line-height: 40rpx;
							margin-top: 8rpx;
						}

						&.t-3 {
							text:nth-child(1) {
								font-weight: 400;
								font-size: 36rpx;
								color: #333333;
								line-height: 40rpx;
							}

							text:nth-child(2) {
								font-weight: 400;
								font-size: 36rpx;
								line-height: 40rpx;
								color: #b4b4b4;
							}
						}
					}
				}
			}
		}
	}

	.M-style {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;

		.M-style-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			border-radius: 8rpx;
		}

		.i {
			&:nth-child(2) {
				margin: 0 !important;
			}
		}

		.select-M-style-item {
			background: #e72a2a;

			text {
				color: #fff !important;
			}

			.num {
				color: #fff !important;
			}
		}
	}

	.top-date {
		// margin: 24rpx 0 0 24rpx;
		padding: 24rpx;
	}

	.M-card {
		display: flex;
		align-items: center;
		margin: 24rpx 0;

		.M-card-item {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-size: 50rpx;

			text:nth-child(1)::before {
				content: "￥";
				font-size: 34rpx;
			}

			text:nth-child(2) {
				margin-top: 14rpx;
				font-size: 36rpx;
			}
		}
	}

	.list-box {
		display: flex;
		flex-direction: column;
	}

	.item {
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 180rpx;
		padding: 0 24rpx;
		border-bottom: 1px solid #b4b4b4;

		.item-left {
			display: flex;
			flex-direction: column;
		}

		.time {
			margin-top: 32rpx;
		}
	}

	.example-body {
		display: flex;
		align-items: center;
		padding-right: 200rpx;
		position: relative;

		.icon {
			margin-left: 20rpx;
		}

		.icon-box {
			position: absolute;
			left: 434rpx;
			pointer-events: none;
		}
	}

	/deep/.uni-date__x-input {
		font-size: 38rpx;
	}
</style>